<template>
    <div class="index">
        <div class="banner" :style="bannerStyle">
            <div class="toCreate" @click.stop="toCreat">开始创作 ></div>
        </div>

        <div class="workType">
            <div class="each_type" @click="chooseType(0)">
                <div class="title" :class="currentSelect == 0 ? 'select' : ''">推荐剧本</div>
                <div class="line" :class="currentSelect == 0 ? '' : 'hidden'"></div>
            </div>
            <div class="each_type" @click="chooseType(1)">
                <div class="title" :class="currentSelect == 1 ? 'select' : ''">热购剧本</div>
                <div class="line" :class="currentSelect == 1 ? '' : 'hidden'"></div>
            </div>
            <div class="each_type" @click="chooseType(2)">
                <div class="title" :class="currentSelect == 2 ? 'select' : ''">最新剧本</div>
                <div class="line" :class="currentSelect == 2 ? '' : 'hidden'"></div>
            </div>
        </div>

        <div class="centerWork">

            <item2 v-for="item in centerList" class="center_item" :data="item" :key="item.Id" @click.stop="toJuBenDetail(item)">

            </item2>

        </div>

        <div class="tradeTitle">
            <div class="hotIcon" :style="hotIconStyle"></div>
            <div class="hotTitleText">热门作品版权交易展示</div>
            <div class="hotLine"></div>
        </div>

        <div class="tradeList">
            <tradeitem v-for="item in tradeList" :key="item.id" class="tradeItem" :data="item" @click="tozhineng(item)"></tradeitem>
        </div>

        <div class="safeTitle">
            <div class="safeIcon" :style="safeIconStyle"></div>
            <div class="safeTitleText">数据安全服务</div>
            <div class="safeLine"></div>
        </div>

        <div class="safeList">
<!--            <div class="safeItem" :style="{background:'url(' + require('@/assets/img/index_bottom_3.png') + ')'}" ></div>-->
<!--            <div class="safeItem" :style="{background:'url(' + require('@/assets/img/index_bottom_2.png') + ')'}" ></div>-->
<!--            <div class="safeItem" :style="{background:'url(' + require('@/assets/img/index_bottom_1.png') + ')'}" ></div>-->
            <img :src="require('@/assets/img/index_bottom_3.png')" class="safeItem">
            <img :src="require('@/assets/img/index_bottom_2.png')" class="safeItem">
            <img :src="require('@/assets/img/index_bottom_1.png')" class="safeItem">
        </div>

        <author ref="author"></author>

    </div>
</template>

<script>
    import item2 from "../profilelist/item2";
    import tradeitem from "../profilelist/tradeitem";
    import {IndexScriptWritingListByWhere} from "../../api/ScriptWriting";
    import {getUserInfo} from "../../utils/auth";
    import {HotScriptWrting} from "../../api/ScriptWriting";
    import author from "../common/author";

    export default {
        name: "index2",
        components: {
            item2,
            tradeitem,
            author,
        },
        data() {
            return {
                bannerStyle: {
                    background: 'url(' + require("@/assets/img/banner2.png") + ")",
                    backgroundSize: '100% 100%',
                    backgroundRepeat: 'no-repeat',
                },
                hotIconStyle:{
                    background: 'url(' + require("@/assets/img/hot.png") + ")",
                    backgroundSize: '100% 100%',
                    backgroundRepeat: 'no-repeat',
                },
                safeIconStyle:{
                    background: 'url(' + require("@/assets/img/fuwu.png") + ")",
                    backgroundSize: '100% 100%',
                    backgroundRepeat: 'no-repeat',
                },
                currentSelect:0,
                centerList:[
                    {
                        id:1,
                        title:'咸鱼女孩的一天',
                        disc:'我是一个极其平凡的咸鱼女孩，双休日就是我的全世界...',
                        select:100,
                        support:100,
                        author:"鞠婧祎",
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        price:800,
                    },
                    {
                        id:2,
                        title:'咸鱼女孩的一天',
                        disc:'我是一个极其平凡的咸鱼女孩，双休日就是我的全世界...',
                        select:100,
                        support:100,
                        author:"鞠婧祎",
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        price:800,
                    },
                    {
                        id:3,
                        title:'咸鱼女孩的一天',
                        disc:'我是一个极其平凡的咸鱼女孩，双休日就是我的全世界...',
                        select:100,
                        support:100,
                        author:"鞠婧祎",
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        price:800,
                    },
                    {
                        id:4,
                        title:'咸鱼女孩的一天',
                        disc:'我是一个极其平凡的咸鱼女孩，双休日就是我的全世界...',
                        select:100,
                        support:100,
                        author:"鞠婧祎",
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        price:800,
                    },
                    {
                        id:5,
                        title:'咸鱼女孩的一天',
                        disc:'我是一个极其平凡的咸鱼女孩，双休日就是我的全世界...',
                        select:100,
                        support:100,
                        author:"鞠婧祎",
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        price:800,
                    },
                ],
                tradeList:[
                    {
                        id:1,
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        title:"咸鱼女孩的一天",
                        time:"2021-11-29  12:00:05",
                        workId:1,
                        price:8000,
                        hashCode:"3213213sdfsad21321safdsfewrewfdsfq3421312",
                    },
                    {
                        id:2,
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        title:"咸鱼女孩的一天",
                        time:"2021-11-29  12:00:05",
                        workId:1,
                        price:8000,
                        hashCode:"3213213sdfsad21321safdsfewrewfdsfq3421312",
                    },
                    {
                        id:3,
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        title:"咸鱼女孩的一天",
                        time:"2021-11-29  12:00:05",
                        workId:1,
                        price:8000,
                        hashCode:"3213213sdfsad21321safdsfewrewfdsfq3421312",
                    },
                    {
                        id:4,
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        title:"咸鱼女孩的一天",
                        time:"2021-11-29  12:00:05",
                        workId:1,
                        price:8000,
                        hashCode:"3213213sdfsad21321safdsfewrewfdsfq3421312",
                    },
                    {
                        id:5,
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        title:"咸鱼女孩的一天",
                        time:"2021-11-29  12:00:05",
                        workId:1,
                        price:8000,
                        hashCode:"3213213sdfsad21321safdsfewrewfdsfq3421312",
                    },
                    {
                        id:6,
                        avtar:"https://img2.baidu.com/it/u=622902245,3661794572&fm=26&fmt=auto",
                        title:"咸鱼女孩的一天",
                        time:"2021-11-29  12:00:05",
                        workId:1,
                        price:8000,
                        hashCode:"3213213sdfsad21321safdsfewrewfdsfq3421312",
                    },
                ],
            }
        },
        created(){
            this.getCenterList()
        },
        methods:{
            chooseType(index){
                this.currentSelect=index

                IndexScriptWritingListByWhere({creationTypeId:1,type:index}).then(res=>{
                    this.centerList=res.data.slice(0,8)
                    console.log('热门列表',this.centerList)
                    this.getHotList()
                })

            },
            getCenterList(){
                IndexScriptWritingListByWhere({creationTypeId:1}).then(res=>{
                    this.centerList=res.data.slice(0,8)
                    console.log('热门列表',this.centerList)
                    this.getHotList()
                })
            },
            getHotList(){
                HotScriptWrting().then(res=>{

                    this.tradeList=res.data.list.slice(0,6)
                    console.log('交易列表',res)
                })
            },
            toJuBen(){
                this.$router.push('/dsp/dspJuBen')
            },
            toJuBenDetail(item){
                console.log('idwei ',item)
                this.$router.push({path:'/dsp/dspDetail',query:{id:item.Id}})
            },
            tozhineng(data){
                console.log('传过去的数据',data)
                let href='http://106.14.18.148:4000/tokens/'+data.contractId+'/instance/'+data.tokenId+'/token-transfers'
                window.open(href, '_blank');
            },

            toMessage(id){
                switch (id) {
                    case 1:
                        this.$router.push('/industryDetail?id=8&typeid=1')
                        break;
                    case 2:
                        this.$router.push('/industryDetail?id=9&typeid=1')
                        break;
                    case 3:
                        this.$router.push('/industryDetail?id=10&typeid=1')
                        break;
                }
            },
            toCreat(){
                console.log('用户信息',getUserInfo())

                if(getUserInfo() == undefined){
                    this.$message.warning('请先登录')
                    return
                }

                let userInfo=JSON.parse(getUserInfo())

                if(userInfo.status == 2){
                    this.$router.push('/creat')
                }else{
                    this.$refs.author.dialogVisible=true
                }

            },

        }
    }
</script>

<style scoped lang="scss">
    .index{
        background: #F2F2F2;
        margin-top: -10px;
    }
    .banner {
        width: 100%;
        height: 460px;
        position: relative;
    }

    .toCreate {
        width: 160px;
        height: 50px;
        background: white;
        position: absolute;
        top: 301px;
        left: 207px;
        text-align: center;
        line-height: 50px;
        color: #2EB0C6;
        cursor: pointer;
        font-size: 20px;
        font-weight: bold;
    }

    .workType{
        width: 312px;
        //width:400px;
        height: 95px;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .each_type{
           cursor: pointer;
           .title{
               //width: 64px;
               height: 21px;
               font-size: 16px;
               font-family: Microsoft YaHei;
               font-weight: 400;
               line-height: 21px;
               opacity: 1;
           }
           .line{
               width: 44px;
               height: 4px;
               background: #2EB0C6;
               opacity: 1;
               border-radius: 0px;
               margin: 0px auto;
               margin-top: 10px;
           }
        }

    }
    .centerWork{
        width: 1601px;
        /*width: 83%;*/
        margin: 0px auto;
        display: flex;
        flex-wrap: wrap;
    }
    .center_item{
        margin-right: 40px;
        margin-bottom: 40px;
        cursor: pointer;
    }
    .center_item:nth-child(4n){
        margin-right: 0px;
    }

    .tradeTitle{
        display: flex;
        width: 1601px;
        margin: 0px auto;
        align-items: center;
        margin-bottom: 24px;
    }
    .hotIcon{
        width: 22px;
        height: 28px;
    }
    .hotTitleText{
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 0px;
        color: #666666;
        opacity: 1;
        margin-left: 14px;
    }
    .hotLine{
        flex-grow: 1;
        margin-left: 24px;
        height: 1px;
        background: #D2D2D2;
    }

    .tradeList{
        width: 1601px;
        margin: 0px auto;
        display: flex;
        flex-wrap: wrap;
    }
    .tradeItem{
        margin-right: 37px;
        margin-bottom: 40px;
    }
    .tradeItem:nth-child(3n){
        margin-right: 0px;
    }

    .safeTitle{
        display: flex;
        width: 1601px;
        margin: 0px auto;
        align-items: center;
        margin-bottom: 24px;
    }
    .safeIcon{
        width: 22px;
        height: 28px;
    }
    .safeTitleText{
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 0px;
        color: #666666;
        opacity: 1;
        margin-left: 14px;
    }
    .safeLine{
        flex-grow: 1;
        margin-left: 24px;
        height: 1px;
        background: #D2D2D2;
    }

    .safeList{
        width: 1601px;
        margin: 0px auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 58px;
    }

    .safeItem{
        width: 506px;
        height: 288px;
        object-fit: fill;
    }
    .hidden{
        visibility: hidden;
    }
    .select{
        color:#2EB0C6;
    }
</style>
